import { useEffect } from "react";

/**
 *
 * @param obj 绑定的对象
 */
export const IProxy = (obj: { [key: string | symbol]: any }) => {
  const object = new Proxy(obj, {
    get: (target, p, re) => {
      console.log("get", target, p, re);
      return target[p];
    },
    set: (target, p, newValue, receiver) => {
      console.log("set", target, p, newValue, receiver);
      target[p] = newValue;
      return true;
    },
  });

  return object;
};

/**
 * definedProperty
 * @desc  在 descriptor 中不能 同时设置访问器 (get 和 set)
 *  和 wriable 或 value，否则会错，
 * 就是说想用(get 和 set)，就不能用（wriable 或 value中的任何一个）
 *
 * 没有设置的属性，就无法监听其变化。
 */

export const useIDefinedProperty = () => {
  const obj: {
    [key: string]: any;
  } = {};

  useEffect(() => {
    Object.defineProperty(obj, "name", {
      configurable: true,
      enumerable: true,
      // value: "张三",
      // writable: true,
      set: (val: any) => {
        console.log("新值", val);
      },
      get: () => {
        console.log("触发条件");
        return obj["name"];
      },
    });

    obj.name = "修改";
    // obj.name = 123;
    obj.value = "新特性";
    // console.dir(obj);
  }, []);

  //   console.log(obj);
  return obj;
};

const debounce = (fn, delay = 300) => {
  let timer: any = null;

  // return () => {
  //   if (timer) {
  //     return
  //   }

  //   timer = setTimeout(() => {
  //     clearTimeout(timer)
  //     Function.call(this,fn)
  //   }, delay);
  // }

  return () => {
    if (timer) {
      timer = null;
    }
    timer = setTimeout(() => {
      clearTimeout(timer);
      fn.call(this);
    }, delay);
  };
};

const a = () => {
  const p = document.createElement("a");
  const div = document.getElementById("123");
  div?.appendChild(p);
};
